<template>
  <div class="list">
    <tar-bar :title="title" />
    <div class="body">
      <div class="tab">
        <van-tabs
          sticky
          id="tabs"
          title-active-color="white"
          title-inactive-color="white"
          v-model="active"
          @change="onClickTab"
        >
          <van-tab title="全部"> </van-tab>
          <van-tab title="办理中"></van-tab>
          <van-tab title="已办结"></van-tab>
          <van-tab title="已取消"></van-tab>
        </van-tabs>
      </div>
      <div class="top"></div>
      <van-list
        class="all_list"
        v-model="loading"
        :finished="finished"
        offset='50'
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="lunbo"  v-for="(item,index) in list" :key="index">
            <div class="first">
                <div>
                    <van-image width="22px" height="22px" :src="img2" />
                    <div>{{item.name}}</div> 
                </div>
                <div>
                    <div class="tag">办理中</div>
                </div>
            </div>
            <div class="two">合同编号：{{item.contractNo}}</div>
            <div class="three">申请时间：{{item.createTime}}</div>
        </div>
      </van-list>
    </div>
  </div>
</template>
  <script>
import tarBar from "../../components/tarBar/index1.vue";
export default {
  data() {
    return {
      active:0,
      list:[],
      img1: require("../../assets/images/house1.png"),
      img2: require("../../assets/images/house2.png"),
      img3: require("../../assets/images/house3.png"),
      loading: false,
      title: "办理进度",
    //   list: [{name:'周转房申请',contractNo:'202280707797972',applyTime:'2022-09-11'},
    //   {name:'周转房申请',contractNo:'202280707797972',applyTime:'2022-09-11'},
    //   {name:'周转房申请',contractNo:'202280707797972',applyTime:'2022-09-11'},
    //   {name:'周转房申请',contractNo:'202280707797972',applyTime:'2022-09-11'},
    //   {name:'周转房申请',contractNo:'202280707797972',applyTime:'2022-09-11'},
    //   {name:'周转房申请',contractNo:'202280707797972',applyTime:'2022-09-11'},
    //   {name:'周转房申请',contractNo:'202280707797972',applyTime:'2022-09-11'},
    // ],
    };
  },
  components: { tarBar },
  created(){
    this.havContract()
  },
  methods: {
     //加载更多
     onLoad() {
      if (this.list.length < this.total) {
        this.pageIndex = this.pageIndex+1;
        this.havContract();
      }
    },
    // 获取合同列表
    havContract() {
      let params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        status: 2,
        partyB: JSON.parse(sessionStorage.getItem("userInfo")).username,
      };
      this.$http.post("/revolving/contract/page", params).then((res) => {
        if (res.code == 200) {
          if(this.list.length <= 0){
            this.list = res.data.list;
          }else{
            this.list = this.list.concat(res.data.list);
          }
          this.loading = false;        
          this.total = res.data.total;
          if (this.list.length >= this.total) { 
            this.$nextTick(()=>{
              this.finished = true;
            })    
           
          }
        }
      });
    },
    onClickTab(item) {
      console.log("----", item);
    },
  },
};
</script>
  
  <style scoped lang="less">
.list {
  // height: 100%;
  width: 100%;
  .body {
    // margin-top: 45px;
    .top {
      position: absolute;
      height: 80px;
      width: 100%;
      background-color: #4868F1;
    }
    .tab {
      margin-top:45px;
      width: 100%;
      background-color: #4868F1;
      #tabs /deep/ .van-tabs__nav--line {
        background-color: #4868F1;
        color: white;
        > .van-tabs__line {
          background-color: white !important;
        }
      }
    }
    .all_list{
     height: 680px;
     overflow: scroll;
    }
    .lunbo {
        position: relative;
        z-index: 100;
      background: white;
      box-shadow: 0px 0px 6px 2px rgba(92, 136, 251, 0.12);
      border-radius: 8px;
      width: 355px;
      height: 134px;
      margin-top: 10px;
      margin-left: 10px;
      text-align: left;
      .first{
        display: flex;
        justify-content: space-between;
        margin-left: 15px;
        padding-top: 15px;
        font-weight: 500;
        >:nth-child(1){
            display: flex;
        }
        >:nth-child(2){
            background: #FF9D00;
            border-radius: 100px 0px 0px 100px;
            width: 60px;
            text-align: center; 
            font-size: 14px;   
            line-height: 25px;    
        }
      }
      .two{
            padding-top: 20px;
            margin-left: 15px;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
        }
        .three{
            padding-top: 15px;
            margin-left: 15px;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
        }
    }
  }
}
</style>
  